<template>
  <Container class="apply-list">
    <div class="container-header" slot="header">
        <Form class="search">
          <Row>
            <Col span="5">
              <FormItem label="商品名称/编码">
                <Input
                    class="start"
                    v-model.trim="list.form.keyword"
                    placeholder="商品名称，商品编码"
                    @on-enter="onSearchBtnClick" />
              </FormItem>
            </Col>
            <Col span="5">
              <FormItem label="审核状态">
                <Select v-model="list.form.status" clearable  placeholder='审核状态'>
                  <Option v-for="(item, index) in list.options" :value="item.value" :key="index">{{ item.label }}</Option>
                </Select>
              </FormItem>
            </Col>
            <Col span="1" class-name="search small">
              <Button type="primary" icon="ios-search" class="btn-search" @click="onSearchBtnClick"></Button>
            </Col>
          </Row>
        </Form>
      </div>
    <Tabs v-model="tab">
      <Button
        size="large"
        class="item"
        type="primary"
        slot="extra"
        icon="md-add"
        @click="onAddProduct">新商品申请</Button>
      <TabPane label="新商品申请列表" name="tab1">
        <homeTable
          :list="list"
          @getData="getData"
          @onPageSizeChange="onPageSizeChange"
          @onPageChange="onPageChange"
          @onSelectionChange="onSelectionChange"
        />
      </TabPane>
    </Tabs>
  </Container>
</template>
<script>
import homeTable from "~/homeTable"
import CategorySelect from '@/components/CategorySelect'
import BrandSelect from '@/components/BrandSelect'
import ApplyListData from "./list/ApplyListData"
import { clearEmpty } from '@/util'
export default {
  name: 'product/apply/list',
  components: {
    CategorySelect,
    BrandSelect,
    homeTable
  },
  data() {
    return {
      tab: "tab1",
      list: ApplyListData
    };
  },
  mounted() {
    this.list.currentPage = ~~this.$route.query.currentPage || 1
    this.list.pageSize = ~~this.$route.query.pageSize || this.list.pageSize
    this.$bus.$on("onLook",({id}) => this.onLook(id))
    this.$bus.$on("onEdit", ({id, productAuditDTO}) => this.onEdit(id, productAuditDTO))
    this.$bus.$on("onDel", ({productInfoDTOId, index}) => this.onDel(productInfoDTOId, index))
    this.getData(); //获取table列表信息
  },
  destroyed() {
    this.$bus.$off()
  },
  methods: {
    onSearchBtnClick() {
      this.list.currentPage = 1
      this.getData()
    },
    getData() {
      this.list.status = "loading"
      let param = {
        current: this.list.currentPage,
        size: this.list.pageSize,
        keyword: this.list.form.keyword,
        status: this.list.form.status
      }
      param = clearEmpty(param)
      this.$ajaxGet("/product/apply/page", param).then(data => {
          this.list.data = []
          this.list.totalItem = Number(data.total)
          this.list.data = (data.records || []).map(item => {
            return {
              ...item,
              id: item.productAuditDTO.id,
              productInfoDTOId: item.productInfoDTO.id,
              code: item.productInfoDTO.code,
              categoryName: item.productInfoDTO.categoryName,
              title: item.productInfoDTO.title,
              code: item.productInfoDTO.code,
              unit: item.productInfoDTO.unit,
              brandName: item.productInfoDTO.brandName,
              salePrice: item.productSkuDTO.salePrice,
              marketPrice: item.productSkuDTO.marketPrice,
              invoicePrice: item.productSkuDTO.invoicePrice,
              stock: item.productSkuDTO.stock,
              status: item.productAuditDTO.status,
              productType: item.productInfoDTO.productType,
              skuId: item.productSkuDTO.id,
              productAuditDTO: item.productAuditDTO,
              weight: item.productInfoDTO.weight,
              auditFailMsg: item.productAuditDTO.auditFailMsg
            }
          })
          this.list.status = "pass"
        }).catch(() => {
          this.list.status = "error"
        })
    },
    onEdit(id, productAuditDTO) {
      this.$router.push({
        name:"product/apply/edit",
        query: {
          productId: id,
          from: 'edit',
          productAuditDTO: JSON.stringify(productAuditDTO)
        }
      })
    },
    onDel(productInfoDTOId, index) {
      let params = {
        ids: productInfoDTOId
      }
      this.$Modal.confirm({
        title: '删除',
        content: '确定删除所选的申请商品？',
        onOk: () => {
          this.$ajaxPost('/product/apply/delete', params).then(() => {
            this.$Notice.success({
              title: '删除成功'
            })
            this.list.data.splice(index, 1)
          })
        }
      })
    },
    onLook(id) {
      this.$router.push({
        name:"product/apply/look",
        query: {
          productId: id,
          from: 'look'
        }
      })
    },
    onAddProduct() {
      this.$router.push({
        name: "product/apply/add"
      })
    },
    onPageChange(number) {
      this.list.currentPage = number;
      this.$router.push({
        name: "product/apply/list",
        query: {
          currentPage: this.list.currentPage,
          pageSize: this.list.pageSize
        }
      });
      this.getData();
    },
    onPageSizeChange(pageSize) {
      this.list.currentPage = 1;
      this.list.pageSize = pageSize;
      this.$router.push({
        name: "product/apply/list",
        query: {
          currentPage: this.list.currentPage,
          pageSize: this.list.pageSize
        }
      });
      this.getData();
    }
  },
  watch: {
    $route() {
      let page = ~~this.$route.query.currentPage;
      let table = this.list;
      if (table.currentPage !== page) {
        table.currentPage = ~~this.$route.query.currentPage === 0 ? 1 : ~~this.$route.query.currentPage;
      }
      this.getData();
    },
    "list.form.categoryId"(newName) {
      if (newName) {
        this.getData();
      } else {
        this.list.form.categoryId = null;
        this.getData();
      }
    }
  }
};
</script>
